<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { addJueSeApi, getJueSeWeiHuApi } from '@/api/system'
import { EditPen, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import { ref } from 'vue'
import attributeAdd from './attributeAdd.vue'
import attributeMaintenance from './attributeMaintenance.vue'

const props = defineProps<{
  isShow: boolean
  formInfo: any
}>()
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getList'): void
}>()

const loading = ref(true)
const indexMethod = (index: number) => index + 1
const tableData = ref([])
// 已有属性值名称
const propKeyList = ref([])
const getList = async () => {
  loading.value = true
  const params = {
    sqlId: 'dimMgr.dimProp',
    sqlParam: JSON.stringify({ dimId: props.formInfo.dim_id })
  }
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      tableData.value = res.rows
      propKeyList.value = res.rows.map((item: any) => item.prop_column)
      console.log('维度属性列表', propKeyList.value)
    })
    .catch(() => {
      ElMessage({ message: '数据请求失败', type: 'error' })
    })
    .finally(() => {
      loading.value = false
    })
}

const amShow = ref(false)
const amFormInfo = ref<any>({})
const attributeBtn = (row: any) => {
  // console.log(row)
  amFormInfo.value = {
    dimId: props.formInfo.dim_id,
    dimTab: props.formInfo.dim_tab,
    propKey: row.key_column,
    propCol: row.prop_column
  }
  amShow.value = true
  // console.log('维度属性信息')
}
const deleteBtn = (row: any) => {
  console.log('维度属性删除')
  const params = {
    sqlId: JSON.stringify(['dimMgr.deleteDimProp', 'dimMgr.deleteDimSort']),
    sqlParam: JSON.stringify([[{ ...row }], [{ ...row }]])
  }
  ElMessageBox.confirm('你确定要删除本维度属性？', '删除维度属性', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          if (res === 'success') {
            getList()
            ElMessage({ message: '删除成功', type: 'success' })
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '删除失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

// 取消
const Cancel = () => {
  emit('update:isShow', false)
}

const addShow = ref(false)
const addTitle = ref('添加维度属性')
const formAbInfo = ref<any>({})
const AddBtn = () => {
  addTitle.value = '添加维度属性'
  formAbInfo.value = {
    dim_id: props.formInfo.dim_id
  }
  addShow.value = true
}
const changeBtn = (row: any) => {
  addTitle.value = '修改维度属性'
  formAbInfo.value = row
  addShow.value = true
  console.log('维度属性修改')
}

onMounted(() => {
  getList()
})
</script>
<template>
  <div class="attributeBox">
    <el-dialog :model-value="true" title="维度属性信息" width="70%" @close="Cancel()">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" plain :icon="Plus" @click="AddBtn">添加属性</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        class="baobiaoTableBox"
      >
        <el-table-column type="index" :index="indexMethod" align="center" width="50" />
        <el-table-column prop="prop_column" label="属性列名" align="center" />
        <el-table-column prop="prop_name" label="属性名称" align="center" />
        <el-table-column prop="key_column" label="键值列名" align="center" />
        <el-table-column prop="parent_prop" label="父属性列名" align="center" />
        <el-table-column prop="prop_describe" label="属性说明" align="center" />
        <el-table-column prop="query_flag" label="是否应用维度" align="center" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.query_flag === '1'" type="success">是</el-tag>
            <el-tag v-else type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="prop_order" label="排序" align="center" width="60" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button text type="warning" :icon="EditPen" @click="attributeBtn(scope.row)">
              属性维护
            </el-button>
            <el-button text type="primary" @click="changeBtn(scope.row)">修改</el-button>
            <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <attributeAdd
      v-if="addShow"
      v-model:is-show="addShow"
      :title="addTitle"
      :form-info="formAbInfo"
      :prop-key-list="propKeyList"
      @get-list="getList"
    />
    <attributeMaintenance v-if="amShow" v-model:is-show="amShow" :form-info="amFormInfo" />
  </div>
</template>
<style scoped lang="less">
.attributeBox {
  padding: 0 8px;

  .baobiaoTableBox {
    .el-button {
      padding: 0;
    }
  }
}
</style>
